<!-- 柚子街 -->
<template>
	<view class="content">
		<header>
			<input type="search" name="search" id="search" placeholder="搜索商品零补贴 下单更省钱" @click="moveSearch" />
			<view class="tab">
				<u-tabs :list="list" @click="click" :current='active'></u-tabs>
			</view>
		</header>
		<!--  内容 -->
		<swiper :current='active' duration='300' @change='changeSwiper' :style="{height:swiperItemHeight+'px'}">
			<swiper-item class="one">
				<view class="swiper">
					<view class="page-wrap">
						<scroll-list ref="list" @load="load" @refresh="refresh" class="shop">
							<view class=""
								style="background-color: white;padding: 18rpx;border-radius: 10rpx;margin-top: 30rpx;">
								<view class="" style="margin-bottom: 20rpx;display: flex;align-items: center;">
									<text style="font-weight: bold;font-size: 1.1rem;">限时抢购 </text>
									<text style="color: #888;margin-left: 18rpx;font-size: .75rem;">每日10点上新</text>
								</view>
								<view class="" style="display: flex;justify-content: space-between;">
									<view class="" v-for="(item,index) in subjectList.slice(0,4)" style="width: 160rpx;"
										@click="move(item)">
										<image :src="item.imageUrl" mode=""
											style="width: 160rpx;height:170rpx;border-radius: 18rpx;">
										</image>
										<view class="">
											<text
												style="word-break: break-all;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: .9rem;margin-top: 10rpx;">{{item.productName}}\n</text>
											<text
												style="color: red;font-weight: bold;font-size: .9rem;margin-top: 10rpx;">￥{{item.minPrice}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="list-item" v-for="(item, index) in shopList" :key="index" @click="move(item)">
								<view class="" style="position: relative;">
									<u-image :src="item.img" :lazy-load="true" width='100' height='100'
										radius='8'></u-image>
									<image v-if="item.markingImage" :src="item.markingImage" mode=""
										style="position: absolute;top: 0;width: 100%;height: 100%;z-index: 99;">
									</image>
								</view>
								<view class="message">
									<p><span v-if='item.businessTags[0]'
											style="background-color: #FF7776;font-size: .8rem;color: whitesmoke;padding: 2rpx 8rpx;border-radius: 8rpx;margin-right: 10rpx;">{{item.businessTags[0]}}</span>{{item.title}}
									</p>
									<text v-if="item.coupons[0]"
										style="color: #FF7776;font-size: .8rem;border-radius: 8rpx;">{{item.coupons[0].name}}</text>
									<view style="display: flex;justify-content: space-between;">
										<view>
											<text style="color: red;font-weight: bold;">￥{{item.price}}</text>
											<text
												style="font-size: .85rem;text-decoration: line-through;margin-left: 18rpx;">￥{{item.marketPrice}}</text>
										</view>
										<view class="">
											<text style="color: #888;font-size: .8rem;">销量{{item.sales}}</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-list>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
	</view>
	</view>
</template>

<script>
	import {
		nextTick
	} from "vue"
	export default {
		data() {
			return {
				list: [{
					name: "新品",
					parentId: "885049739334287395"
				}, {
					name: "母婴",
					parentId: "885049739388813374"
				}, {
					name: "家电",
					parentId: "885049739354996763"
				}, {
					name: "美妆",
					parentId: "885049739338350627"
				}, {
					name: "数码",
					parentId: "885049739346083894"
				}, {
					name: "食品",
					parentId: "885049739366662155"
				}, {
					name: "服饰",
					parentId: "885049739376230401"
				}, {
					name: "国际",
					parentId: "885049739380162575"
				}],
				active: 0,
				shopList: [],
				page: 1,
				swiperItemHeight: 0,
				parentId: "885049739334287395",
				subjectList: []
			}
		},
		onLoad(e) {},
		onReady() {},
		methods: {
			click(item) {
				this.parentId = item.parentId
				this.shopList = []
				this.load()
				this.page = 1
			},
			changeSwiper(e) {},
			getSwiperItemHeight(active = 0) {
				uni.createSelectorQuery()
					.in(this)
					.selectAll('.swiper')
					.boundingClientRect()
					.exec(res => {
						this.swiperItemHeight = res[0][active].height
					})
			},
			load(paging) {
				setTimeout(() => {
					uni.request({
						url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/v1/Cms/goodscommonpage",
						data: {
							PageNum: this.page,
							PageSize: 10,
							ParentId: this.parentId
						},
						success: res => {
							this.shopList = [...this.shopList, ...res.data.data.list]
							this.$refs.list.loadSuccess({
									list: this.shopList,
									total: 50
								}),
								this.page++
							this.$nextTick(() => {
								this.getSwiperItemHeight()
							})
						}
					})
					uni.request({
						url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/product/limit-subject-list",
						method: "POST",
						data: {
							"activityStatus": 1,
							"alias": "jash_371703166832965",
							"categoryId": "0",
							"pageIndex": 1,
							"pageSize": 15
						},
						success: (res) => {
							this.subjectList = res.data.data
						}
					})
				})
			},
			refresh(paging) {
				setTimeout(() => {
					this.page = 0
					setTimeout(() => {
						uni.request({
							url: "https://app-gw.juaiyouxuan.com/api-bff/openapi/v1/Cms/goodscommonpage",
							data: {
								PageNum: 1,
								PageSize: 10,
								ParentId: this.parentId
							},
							success: res => {
								this.shopList = res.data.data.list
								this.$refs.list.refreshSuccess({
										list: this.shopList,
										total: 50
									}),
									this.$nextTick(() => {
										this.getSwiperItemHeight()
									})
							}
						})
					})
				})
			},
			move(item) {
				uni.navigateTo({
					url: './shopInfo/shopInfo?pid=' + item.productId
				})
			},
			moveSearch() {
				uni.navigateTo({
					url: '/pages/street/search'
				})
			}
		}
	}
</script>

<style lang="less">
	* {
		box-sizing: border-box;
	}

	.box {
		margin-top: 26px;
	}

	.content {
		background-color: var(--bgcolor);
		padding: 10px;
		padding-top: 66px;
	}

	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 10px;
		z-index: 99;
		background-color: var(--bgcolor);

		input {
			background-color: white;
			padding: 6px 18px;
			font-size: .9rem;
			border-radius: 14px;
			height: 32px;
		}
	}

	.main {
		padding: 10px;

		.banana {
			display: flex;
			justify-content: space-between;
			background-color: white;
			border-radius: 8px;
			padding: 10px;
		}
	}

	.one {
		.ba {
			display: flex;
			justify-content: space-between;
			margin-top: 8px;

			li {
				width: 24%;
				background-color: white;
				border-radius: 8px;
				overflow: hidden;
				margin: 0 2px;

				&:active {
					background-color: whitesmoke;
				}

				view {
					padding: 6px 2px;

					p:nth-of-type(1) {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: .75rem;
					}

					p:nth-of-type(2) {
						font-size: 1rem;
						color: #d04d1d;
						margin: 4px;
						font-size: .8rem;

						span {
							color: #888;
							text-decoration: line-through;
							margin-left: 6px;
							font-size: .65rem;
						}
					}
				}

				img {
					width: 100%;
				}
			}
		}

		.shop {
			margin-top: 20px;

			.list-item {
				display: flex;
				margin: 10px 0;
				background-color: white;
				border-radius: 8px;
				padding: 6px;

				&:active {
					background-color: var(--bgcolor);
				}

				img {
					width: 26%;
					border-radius: 8px;
				}

				.message {
					margin-left: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					overflow: hidden;
					width: 100%;

					p:nth-child(1) {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					view:last-child {
						p:nth-child(2) {
							display: flex;
							justify-content: space-between;
						}
					}
				}
			}
		}
	}

	#search {
		position: relative;
		padding: 0 60rpx;

		&::before {
			content: "";
			display: block;
			background: url("../../static/img/搜索.png") no-repeat;
			background-size: 100%;
			width: 38rpx;
			height: 38rpx;
			position: absolute;
			left: 18rpx;
			top: 14rpx;
		}
	}
</style>